<!--
 * @Author: lixb
 * @Date: 2020-08-19 10:29:30
 * @LastEditTime: 2020-09-18 20:26:39
 * @Descripttion: 消费统计模块
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="modul-title">
          <img
            src="@/assets/img/消费统计.png"
            style="height: 25px;width: 25px;margin-right: 10px;"
          />
          <span>消费统计</span>
          <span style="float: right;">
            <el-date-picker
              v-model="year"
              type="year"
              value-format="yyyy"
              :picker-options="pickerOptions"
              placeholder="选择年"
              @change="getInfo"
            ></el-date-picker>
          </span>
        </span>
      </div>
      <div id="myChart" class="text item"></div>
    </el-card>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { mapGetters } from 'vuex';
  import { getEchartsData } from '@/api/home';
  import Vue from 'vue';
  export default {
    data() {
      return {
        jicai: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        elm: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        bendishenghuo: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        yanqing: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        shangcheng: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        huafei: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        year: new Date(),
        pickerOptions: {
          //年份选择器大于当前时间禁用
          disabledDate(date) {
            let nowYear = new Date();
            if (date.getTime() > nowYear) {
              return true;
            }
            return false;
          },
        },
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
    },
    watch: {},
    mounted() {
      this.getInfo(this.year.getFullYear() + '');
      Vue.prototype.$echarts = echarts;
      this.drawLine();
    },
    activated() {
      window.addEventListener('resize', this.resizeEchartsFn);
    },
    deactivated() {
      window.removeEventListener('resize', this.resizeEchartsFn);
    },
    methods: {
      getInfo(val) {
        this.jicai = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.elm = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.bendishenghuo = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.yanqing = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.shangcheng = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.huafei = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let params = {
          deptIdList: [this.userInfo.organId],
          year: val,
        };
        getEchartsData(params).then(res => {
          let data = res.data;
          for (let item in data) {
            let index = Number(data[item].time.substring(5) - 1);

            if (data[item].serviceLine == 0) {
              this.shangcheng[index] = data[item].amount;
            }
            if (data[item].serviceLine == 1) {
              this.jicai[index] = data[item].amount;
            }
            if (data[item].serviceLine == 3) {
              this.bendishenghuo[index] = data[item].amount;
            }
            if (data[item].serviceLine == 7) {
              this.elm[index] = data[item].amount;
            }
            if (data[item].serviceLine == 5) {
              this.yanqing[index] = data[item].amount;
            }
            if (data[item].serviceLine == 6) {
              this.huafei[index] = data[item].amount;
            }
          }
          this.drawLine();
        });
      },
      resizeEchartsFn() {
        this.$echarts.init(document.getElementById('myChart')).resize();
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          color: ['#6D49FF', '#8796FE', '#FDCC96', '#93E3C4', '#64B5F6', '#DFC4FF'],
          legend: {
            data: ['话费', '集采', '饿了么', '本地生活', '宴请', '商城'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '话费',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.huafei,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#6D49FF';
                  },
                },
              },
            },
            {
              name: '集采',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.jicai,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#8796FE';
                  },
                },
              },
            },
            {
              name: '饿了么',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.elm,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#FDCC96';
                  },
                },
              },
            },
            {
              name: '本地生活',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.bendishenghuo,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#93E3C4';
                  },
                },
              },
            },
            {
              name: '宴请',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.yanqing,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#64B5F6';
                  },
                },
              },
            },
            {
              name: '商城',
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: this.shangcheng,
              itemStyle: {
                normal: {
                  color: function() {
                    return '#DFC4FF';
                  },
                },
              },
            },
          ],
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-card.is-always-shadow {
    border-radius: 10px;
  }
  .modul-title * {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
  }
  .box-card {
    margin-top: 10px;
    #myChart {
      width: 100%;
      height: 400px;
    }
  }
</style>
